// import * as joint from 'jointjs';
// import 'jointjs/dist/joint.css';

// // 创建 JointJS 图和画布
// const graph = new joint.dia.Graph();
// const paper = new joint.dia.Paper({
//   el: document.getElementById('paper'),
//   model: graph,
//   width: 1200,
//   height: 700,
//   gridSize: 10,
//   drawGrid: true,
//   background: { color: '#f8f8f8' }
// });

// // 工具函数：创建节点
// function createRect(x, y, text, fill = '#fffbe6') {
//   const rect = new joint.shapes.standard.Rectangle();
//   rect.position(x, y);
//   rect.resize(140, 40);
//   rect.attr({
//     body: { fill, stroke: '#faad14', strokeWidth: 2, rx: 8, ry: 8 },
//     label: { text, fill: '#333', fontSize: 14 }
//   });
//   rect.addTo(graph);
//   return rect;
// }

// // 创建主要节点
// const n1 = createRect(150, 100, '电压平台设计');
// const n2 = createRect(350, 100, '电流仿真数据');
// const n3 = createRect(550, 100, '高压接口定义');

// // 第二行
// const n4 = createRect(150, 200, '各零部件能力校核', '#e6f7ff');
// const n5 = createRect(350, 200, '线束、铜排、保险丝选型', '#e6f7ff');
// const n6 = createRect(550, 200, '收集X/Y电容、电感', '#e6f7ff');

// // 第三行
// const n7 = createRect(150, 300, '确认电压平台设计', '#f6ffed');
// const n8 = createRect(350, 300, '校核，确认电气件规格', '#f6ffed');
// const n9 = createRect(550, 300, '确认高压接口定义', '#f6ffed');
// const n10 = createRect(750, 300, '更新，确认参数数值', '#f6ffed');

// // 连线函数
// function link(source, target) {
//     const l = new joint.shapes.standard.Link();
//     l.source(source);
//     l.target(target);
//     l.attr({
//       line: {
//         stroke: '#faad14',
//         strokeWidth: 2,
//         targetMarker: {
//           type: 'path',
//           d: 'M 10 -5 0 0 10 5 z', // 经典三角箭头
//           fill: '#faad14',
//           stroke: '#faad14'
//         }
//       }
//     });
//     l.addTo(graph);
//     return l;
//   }

// // 连接主要流程
// link(n1, n4);
// link(n2, n5);
// link(n3, n6);

// link(n4, n7);
// link(n5, n8);
// link(n6, n9);
// link(n6, n10);

// // 横向流程
// link(n1, n2);
// link(n2, n3);

// link(n7, n8);
// link(n8, n9);

// // 你可以根据实际业务流程继续补充和美化

import * as joint from 'jointjs';
import 'jointjs/dist/joint.css';

// 创建 JointJS 图和画布
const graph = new joint.dia.Graph();
const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  model: graph,
  width: 1800,
  height: 900,
  gridSize: 10,
  drawGrid: true,
  background: { color: '#f8f8f8' }
});

// 工具函数：创建节点
function createRect(x, y, text, fill = '#fffbe6', width = 140, height = 40, fontSize = 14) {
  const rect = new joint.shapes.standard.Rectangle();
  rect.position(x, y);
  rect.resize(width, height);
  rect.attr({
    body: { fill, stroke: '#faad14', strokeWidth: 2, rx: 8, ry: 8 },
    label: { text, fill: '#333', fontSize }
  });
  rect.addTo(graph);
  return rect;
}

// 工具函数：创建大分组
function createGroup(x, y, w, h, label) {
  const group = new joint.shapes.standard.Rectangle();
  group.position(x, y);
  group.resize(w, h);
  group.attr({
    body: { fill: '#e6f7ff', stroke: '#1890ff', strokeWidth: 2, rx: 16, ry: 16, opacity: 0.2 },
    label: { text: label, fill: '#1890ff', fontSize: 18, fontWeight: 'bold' }
  });
  group.addTo(graph);
  return group;
}

// 工具函数：连线
function link(source, target, color = '#faad14') {
  const l = new joint.shapes.standard.Link();
  l.source(source);
  l.target(target);
  l.attr({
    line: {
      stroke: color,
      strokeWidth: 2,
      targetMarker: {
        type: 'path',
        d: 'M 10 -5 0 0 10 5 z',
        fill: color,
        stroke: color
      }
    }
  });
  l.addTo(graph);
  return l;
}

// 1. 左侧主结构分组
const group1 = createGroup(60, 60, 700, 350, 'REESS');

// 2. 主流程节点
const n1 = createRect(120, 100, '电压平台设计');
const n2 = createRect(320, 100, '电流仿真数据');
const n3 = createRect(520, 100, '高压接口定义');

const n4 = createRect(120, 200, '各零部件能力校核', '#e6f7ff');
const n5 = createRect(320, 200, '线束、铜排、保险丝选型', '#e6f7ff');
const n6 = createRect(520, 200, '收集X/Y电容、电感', '#e6f7ff');

const n7 = createRect(120, 300, '确认电压平台设计', '#f6ffed');
const n8 = createRect(320, 300, '校核，确认电气件规格', '#f6ffed');
const n9 = createRect(520, 300, '确认高压接口定义', '#f6ffed');
const n10 = createRect(720, 300, '更新，确认参数数值', '#f6ffed');

// 3. 连线
link(n1, n4);
link(n2, n5);
link(n3, n6);

link(n4, n7);
link(n5, n8);
link(n6, n9);
link(n6, n10);

link(n1, n2, '#b37feb');
link(n2, n3, '#b37feb');
link(n7, n8, '#52c41a');
link(n8, n9, '#52c41a');

// 4. 右侧接口定义（用一组小矩形模拟表格）
const rightGroup = createGroup(900, 60, 800, 350, 'Mi BMU 接口定义');
const interfaceNodes = [];
const interfaceLabels = [
  'FlyBack', 'CCU', 'Mi BMU', 'AC PALLET', 'ZCU', 'DLC-S', 'DC PALLET'
];
interfaceLabels.forEach((label, i) => {
  interfaceNodes.push(
    createRect(950 + i * 100, 120, label, '#fff', 90, 30, 12)
  );
});

// 5. 用虚线连线主结构和接口定义
link(n3, interfaceNodes[2], '#fa541c').attr('line/strokeDasharray', '5 5');

// 6. 说明性文字（可选）
function createText(x, y, text, color = '#888', fontSize = 14) {
  const t = new joint.shapes.standard.TextBlock();
  t.position(x, y);
  t.resize(200, 30);
  t.attr({
    label: { text, fill: color, fontSize }
  });
  t.addTo(graph);
  return t;
}
createText(120, 60, '① 电路结构', '#faad14', 16);
createText(120, 170, '② 流程分层', '#1890ff', 16);
createText(120, 270, '③ 能力校核', '#52c41a', 16);
createText(120, 370, '④ 设计确认', '#fa541c', 16);
